Node / ReticulumProjects / MeshChatX.git / files / docs / agents / conventions / frontend.md

Displaying Raw • View rendered • Download

Tc9d1d9# Frontend conventions

Applies when editing Ta5d6ff`meshchatx/src/frontend/**/*.{vue,js}`.

Tff7b72- Vue 3 Options API is the dominant pattern. Match the file you edit.

Tff7b72- API calls go through Ta5d6ff`window.api` (not ad-hoc axios imports in pages).

Tff7b72- Toasts: Ta5d6ff`ToastUtils.success|error|warning|info|loading|dismiss`.

Tff7b72- New top-level pages need: route in Ta5d6ff`main.js`, nav entry when discoverable, Ta5d6ff`en.json` keys, frontend tests.

Tff7b72- When adding user-visible strings, update Ta5d6ff`en.json` and the other maintained locale files under Ta5d6ff`meshchatx/src/frontend/locales/` with real translations (not English copies).

Tff7b72- Sidebar unread pills live on nav entries in Ta5d6ff`coreNavEntries.js` and counters in Ta5d6ff`GlobalState`. Do not bring back a header notification bell for that job.

Tff7b72- Do not use Ta5d6ff`_`-prefixed keys in Vue Ta5d6ff`data()` (Ta5d6ff`vue/no-reserved-keys`).

Tff7b72- File inputs: prefer broad Ta5d6ff`accept` for identity keys (Ta5d6ff`.bin,.key,.identity,application/octet-stream,*/*`). Database restore stays Ta5d6ff`.zip`.

Tff7b72- Prefer existing MaterialDesignIcon / layout patterns over new design systems.

Tff7b72- No backticks in code comments. Prefer plain words or quoted identifiers.

Tc9d1d9## Mega-page extracts

When splitting large page shells, follow Ta5d6ff`docs/agents/skills/vue-mega-page-split/SKILL.md`

and the Frontend mega-pages table in Ta5d6ff`docs/agents/module-ownership.md`.

Tff7b72- Mechanical extract only. Move or behaviour change, never both in the same change.

Tff7b72- Prefer Ta5d6ff`internal/` or Ta5d6ff`settings/sections/` for page-private UI. Prefer colocated or Ta5d6ff`js/<feature>/` for pure helpers.

Tff7b72- Aim shells toward under about 2000 lines across multiple PRs. Prefer slices of about 150 to 300 lines.

Tff7b72- Verify with ownership contracts in Ta5d6ff`tests/frontend/frontendOwnershipContract.test.js` plus focused page tests.

Tff7b72- Do not treat Ta5d6ff`task test:quick` alone as enough coverage for map, settings, call, or conversation extracts.